<template>
  <div class="dSUse">
    <center-border :text="dSUseText" :show="true" :options="options" @change="handleChange">
      <div class="content" ref="dSEcharts"></div>
    </center-border>
  </div>
</template>

<script>
import centerBorder from "./centerBorder.vue";
import Cookies from "js-cookie";
import dayjs from "dayjs";
import { connrequest } from "@/api/firstPage";

export default {
  name: "deepSeekCall",
  components: {
    centerBorder
  },
  mounted() {
    this.getChatGPTLogSumGroupByDate().then(() => {
      this.createChart();
    });
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
  data() {
    return {
      dSUseText: "本地deepseek调用趋势图",
      options: [
        { value: "1", label: "最近一周" },
        { value: "2", label: "最近半月" },
        { value: "3", label: "最近一月" }
      ],
      chart: null,
      kbSumX: [],
      kbSumY: []
    };
  },
  methods: {
    createChart() {
      // 初始化 ECharts
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = this.$echarts.init(this.$refs.dSEcharts);
      this.updateChart();
    },
    updateChart() {
      const option = {
        // 鼠标悬停提示框
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          borderColor: "#fff",
          textStyle: {
            color: "#fff"
          }
        },
        // 网格设置
        grid: {
          left: 0,
          bottom: 0,
          top: 10,
          right: "10px",
          containLabel: true,
          backgroundColor: "#141726"
        },
        // X 轴设置（改为日期）
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.kbSumX.map((item) => dayjs(item).format("MM-DD")), // 使用日期数据
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#fff",
            fontSize: 12
          },
          // 添加垂直方向的虚线
          splitLine: {
            show: true, // 显示垂直网格线
            lineStyle: {
              color: "#4a4f69", // 红色虚线，与目标图一致
              type: "dashed", // 虚线样式
              opacity: 0.5 // 透明度稍低，与目标图一致
            }
          }
        },
        // Y 轴设置（范围调整为 0-400）
        yAxis: {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: "#fff",
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#4A4F69",
              type: "dashed"
            }
          }
        },
        // 数据系列
        series: [
          {
            name: "同期",
            type: "line",
            data: this.kbSumY, // 使用动态数据
            smooth: true,
            lineStyle: {
              color: "#ff7f50", // 改为橙色
              width: 2
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(255, 127, 80, 0.5)" }, // 橙色渐变
                { offset: 1, color: "rgba(255, 127, 80, 0)" }
              ])
            },
            emphasis: {
              focus: "series"
            },
            // 使用 series.markLine 添加 Y=0 处的实线
            markLine: {
              silent: true, // 不响应鼠标事件
              symbol: ["none", "none"], // 不显示两端的箭头或标记
              label: {
                show: false // 隐藏标签（即不显示“0”）
              },
              data: [
                {
                  yAxis: 0, // 在 Y=0 处绘制水平线
                  lineStyle: {
                    color: "#4A4F69", // 红色实线，与目标图一致
                    type: "solid", // 实线
                    width: 1 // 线宽
                  }
                }
              ]
            }
          }
        ]
      };
      this.chart.setOption(option);
    },
    async getChatGPTLogSumGroupByDate(days) {
      let defaultLogDay;
      if (days) {
        defaultLogDay = days;
      } else {
        defaultLogDay = Cookies.get("defaultLogDay") || 7;
      }
      const data = {
        Filter: {
          StartTime: dayjs().add(-defaultLogDay, "day").format("YYYY-MM-DD") + " 00:00:00",
          EndTime: "",
          Model: "本地Deepseek"
        }
      };
      const res = await connrequest("GetChatGPTLogSumGroupByDate", data);
      if (res.Status.StatusCode === 0) {
        this.kbSum = res.Data;
        this.kbSumX = [];
        this.kbSumY = [];
        for (let i = 0; i < defaultLogDay + 1; i++) {
          this.kbSumX.unshift(dayjs().add(-i, "day").format("YYYY-MM-DD"));
        }
        this.kbSumX.forEach((item) => {
          const t1 = this.kbSum.find((v) => v.Name === item);
          if (t1) {
            this.kbSumY.push(t1.Count);
          } else {
            this.kbSumY.push(0);
          }
        });
      }
      if (this.chart) {
        this.chart.dispose();
      }
      this.createChart();
    },
    handleChange(value) {
      switch (value) {
        case "1":
          this.getChatGPTLogSumGroupByDate(7);
          break;
        case "2":
          this.getChatGPTLogSumGroupByDate(15);
          break;
        case "3":
          this.getChatGPTLogSumGroupByDate(30);
          break;
        default:
          this.getChatGPTLogSumGroupByDate(7);
      }
    }
  }
};
</script>

<style scoped>
.dSUse {
  height: 35%;
}
.content {
}
</style>
